<!--
 * @Description: 
 * @Author: helei
 * @Date: 2021-05-29 09:08:40
 * @LastEditors: helei
 * @LastEditTime: 2021-06-05 11:01:59
-->
<template>
  <div class="recommendProduct" v-if="recommendProList && recommendProList.length">
    <div class="title">推荐特产</div>
    <div class="list">
      <div class="item" v-for="(item,index) in recommendProList.slice(0, 4)" :key="index" @click="toRecommendPro(item.id)">
          <img class="el-image" :src="item.titlePicStr" />
          <div class="name">{{ item.productName }}</div>
          <div class="star">
              <i class="el-icon-star-on"></i>
              <i class="el-icon-star-on"></i>
              <i class="el-icon-star-on"></i>
              <i class="el-icon-star-on"></i>
              <i class="el-icon-star-on"></i>
          </div>
          <div class="price">￥{{item.productPriceMax}}</div>
          <div class="add">
                <el-button type="primary" @click.stop="putShopCart(item)">加入购物车</el-button>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get_data } from "../../utils/utils"
export default {
  components: {},
  props: ["recommendProList"],
  data() {
    return {};
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    putShopCart(item) {
      if (!get_data("userInfo")) {
        this.$router.push({
          path: "/login"
        });
        return;
      }
      let userInfo = JSON.parse(get_data("userInfo"));
      this.$http
        .fetch(this.$apiPath.putShopCart, {
          method: "post",
          data: {
            addOrDel: 1,
            customerId: userInfo.id,
            productId: item.id,
            specsId: item.specsId,
          },
        }).then(res=> {
          if (res.code == 200) {
            this.$message.success("添加成功");
          }
        })
    },
    toRecommendPro(id) {
      this.$router.push({
          path: "/goods/details",
          query: {
            id
          },
        });
    }
  },
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>